<template>
  <div>
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>工作量审核
          </p>
        </div>
        <div class="topright" @click="$router.go(-1)">
          <el-button type="info">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
    </div>

    <div class="main">
      <!-- 地图展示 Start-->
      <read-only-amap
        style="margin-bottom:20px;"
        :readOnlyAmapData="readOnlyAmapData"
        v-loading="amapLoading"
        element-loading-text="地图加载中..."
        element-loading-spinner="el-icon-loading"
        v-if="!amapLoading"
      ></read-only-amap>
      <!-- 地图展示 End -->
      <div style="width:1100px;margin:20px auto;">
        <button class="sumbitBtn" @click="handleSubInfo">提交上级审核</button>
      </div>
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="tabs-header">
        <el-tab-pane :label="'线路'" name="second">
          <div class="gcl">
            <div class="title">
              线路队
              <span @click="checked = !checked">查看隐藏工程量</span>
            </div>
            <el-table :data="infodetail" tooltip-effect="dark" style border>
              <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="施工方式" align="center" width="80" prop="optionName"></el-table-column>
              <el-table-column label="施工内容" align="center" width="200" prop="itemContent"></el-table-column>
              <el-table-column label="单位" align="center" width="80" prop="itemUnit"></el-table-column>
              <el-table-column label="预结算数量" align="center" width="100" prop="budget"></el-table-column>
              <el-table-column label="修改数量" align="center" width="80" prop="finalbudget"></el-table-column>
              <!-- <el-table-column label="损耗率" align="center" width="80" prop="num2"></el-table-column> -->
              <el-table-column label="单价" align="center" width="80" prop="price"></el-table-column>
              <el-table-column label="总计" align="center" width="80">
                <template slot-scope="scope">{{(scope.row.finalbudget*scope.row.price)|numFilter}}</template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="correctCause"></el-table-column>
              <el-table-column label="操作" align="center" width="140" fixed="right">
                <template slot-scope="scope">
                  <a @click.prevent="edit(scope.row)">修改数量</a>
                  <!-- <el-button
                    @click="handleIdea(scope.row.proId)"
                    type="text"
                    size="small"
                    class="red"
                    style="color:#1abc9a;"
                  >审批意见</el-button>-->
                  <!-- v-show="scope.row.flowStep == '提交到项目部经理初审' &&ms_RoleName == 'ProjectManager'" -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-bottom: 20px;">备注说明：</div>

          <transition name="bounce">
            <div class="gcl" v-if="checked">
              <div class="title">隐藏工作量</div>
              <el-table :data="visibleWorkLoad" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="200" type="index"></el-table-column>
                <el-table-column label="定额编号" align="center" width="200" prop="quotaCode"></el-table-column>
                <el-table-column label="工作内容" align="center" prop="optionName"></el-table-column>
                <el-table-column label="单位" align="center" width="200" prop="testunit"></el-table-column>
                <el-table-column label="数量" align="center" prop="num"></el-table-column>
              </el-table>
            </div>
          </transition>
        </el-tab-pane>

        <el-tab-pane :label="'熔纤'" name="fourth">
          <div class="gcl">
            <div class="title">
              熔纤队
              <span @click="checked = !checked">查看隐藏工程量</span>
            </div>
            <el-table :data="infodetail" tooltip-effect="dark" style border>
              <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="施工方式" align="center" width="80" prop="optionName"></el-table-column>
              <el-table-column label="施工内容" align="center" width="200" prop="itemContent"></el-table-column>
              <el-table-column label="单位" align="center" width="80" prop="itemUnit"></el-table-column>
              <el-table-column label="预结算数量" align="center" width="100" prop="budget"></el-table-column>
              <el-table-column label="修改数量" align="center" width="80" prop="finalbudget"></el-table-column>
              <!-- <el-table-column label="损耗率" align="center" width="80" prop="num2"></el-table-column> -->
              <el-table-column label="单价" align="center" width="80" prop="price"></el-table-column>
              <el-table-column label="总计" align="center" width="80">
                <template slot-scope="scope">{{(scope.row.finalbudget*scope.row.price)|numFilter}}</template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="correctCause"></el-table-column>
              <el-table-column label="操作" align="center" width="140" fixed="right">
                <template slot-scope="scope">
                  <a @click.prevent="edit(scope.row)">修改数量</a>
                  <!-- <el-button

                    @click="handleIdea(scope.row.proId)"
                    type="text"
                    size="small"
                    class="red"
                    style="color:#1abc9a;"
                  >审批意见</el-button>-->
                  <!-- v-show="scope.row.flowStep == '提交到项目部经理初审' &&ms_RoleName == 'ProjectManager'" -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-bottom: 20px;">备注说明：</div>

          <transition name="bounce">
            <div class="gcl" v-if="checked">
              <div class="title">隐藏工作量</div>
              <el-table :data="visibleWorkLoad" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="200" type="index"></el-table-column>
                <el-table-column label="定额编号" align="center" width="200" prop="quotaCode"></el-table-column>
                <el-table-column label="工作内容" align="center" prop="optionName"></el-table-column>
                <el-table-column label="单位" align="center" width="200" prop="testunit"></el-table-column>
                <el-table-column label="数量" align="center" prop="num"></el-table-column>
              </el-table>
            </div>
          </transition>
        </el-tab-pane>

        <el-tab-pane :label="'管道'" name="first">
          <div class="gcl">
            <div class="title">
              管道队
              <span @click="checked = !checked">查看隐藏工程量</span>
            </div>
            <el-table :data="infodetail" tooltip-effect="dark" style border>
              <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="施工方式" align="center" width="80" prop="optionName"></el-table-column>
              <el-table-column label="施工内容" align="center" width="200" prop="itemContent"></el-table-column>
              <el-table-column label="单位" align="center" width="80" prop="itemUnit"></el-table-column>
              <el-table-column label="预结算数量" align="center" width="100" prop="budget"></el-table-column>
              <el-table-column label="修改数量" align="center" width="80" prop="finalbudget"></el-table-column>
              <!-- <el-table-column label="损耗率" align="center" width="80" prop="num2"></el-table-column> -->
              <el-table-column label="单价" align="center" width="80" prop="price"></el-table-column>
              <el-table-column label="总计" align="center" width="80">
                <template slot-scope="scope">{{(scope.row.finalbudget*scope.row.price)|numFilter}}</template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="correctCause"></el-table-column>
              <el-table-column label="操作" align="center" width="140" fixed="right">
                <template slot-scope="scope">
                  <a @click.prevent="edit(scope.row)">修改数量</a>
                  <!-- <el-button

                    @click="handleIdea(scope.row.proId)"
                    type="text"
                    size="small"
                    class="red"
                    style="color:#1abc9a;"
                  >审批意见</el-button>-->
                  <!-- v-show="scope.row.flowStep == '提交到项目部经理初审' &&ms_RoleName == 'ProjectManager'" -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-bottom: 20px;">备注说明：</div>

          <transition name="bounce">
            <div class="gcl" v-if="checked">
              <div class="title">隐藏工作量</div>
              <el-table :data="visibleWorkLoad" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="200" type="index"></el-table-column>
                <el-table-column label="定额编号" align="center" width="200" prop="quotaCode"></el-table-column>
                <el-table-column label="工作内容" align="center" prop="optionName"></el-table-column>
                <el-table-column label="单位" align="center" width="200" prop="testunit"></el-table-column>
                <el-table-column label="数量" align="center" prop="num"></el-table-column>
              </el-table>
            </div>
          </transition>
        </el-tab-pane>

        <el-tab-pane :label="'设备'" name="third">
          <div class="gcl">
            <div class="title">
              设备队
              <span @click="checked = !checked">查看隐藏工程量</span>
            </div>
            <el-table :data="infodetail" tooltip-effect="dark" style border>
              <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="施工方式" align="center" width="80" prop="optionName"></el-table-column>
              <el-table-column label="施工内容" align="center" width="200" prop="itemContent"></el-table-column>
              <el-table-column label="单位" align="center" width="80" prop="itemUnit"></el-table-column>
              <el-table-column label="预结算数量" align="center" width="100" prop="budget"></el-table-column>
              <el-table-column label="修改数量" align="center" width="80" prop="finalbudget"></el-table-column>
              <!-- <el-table-column label="损耗率" align="center" width="80" prop="num2"></el-table-column> -->
              <el-table-column label="单价" align="center" width="80" prop="price"></el-table-column>
              <el-table-column label="总计" align="center" width="80">
                <template slot-scope="scope">{{(scope.row.finalbudget*scope.row.price)|numFilter}}</template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="correctCause"></el-table-column>
              <el-table-column label="操作" align="center" width="140" fixed="right">
                <template slot-scope="scope">
                  <a @click.prevent="edit(scope.row)">修改数量</a>
                  <!-- <el-button

                    @click="handleIdea(scope.row.proId)"
                    type="text"
                    size="small"
                    class="red"
                    style="color:#1abc9a;"
                  >审批意见</el-button>-->
                  <!-- v-show="scope.row.flowStep == '提交到项目部经理初审' &&ms_RoleName == 'ProjectManager'" -->
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div style="margin-bottom: 20px;">备注说明：</div>

          <transition name="bounce">
            <div class="gcl" v-if="checked">
              <div class="title">隐藏工作量</div>
              <el-table :data="visibleWorkLoad" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="200" type="index"></el-table-column>
                <el-table-column label="定额编号" align="center" width="200" prop="quotaCode"></el-table-column>
                <el-table-column label="工作内容" align="center" prop="optionName"></el-table-column>
                <el-table-column label="单位" align="center" width="200" prop="testunit"></el-table-column>
                <el-table-column label="数量" align="center" prop="num"></el-table-column>
              </el-table>
            </div>
          </transition>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 修改数量 -->
    <div class="component-model">
      <el-dialog title="修改数量" :visible.sync="dialogVisible" width="600px">
        <el-form
          :model="ruleForm"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
          style="font-size: 12px"
        >
          <el-form-item label="工作内容：">
            <el-input v-model="ruleForm.itemContent" disabled="disabled"></el-input>
          </el-form-item>
          <el-form-item label="预结算数量：">
            <el-input v-model="ruleForm.budget" disabled="disabled"></el-input>
          </el-form-item>
          <div class="xiu">
            <span>修改数量：</span>
            <el-input-number
              v-model="ruleForm.finalbudget"
              controls-position="right"
              @change="handleChange"
              :min="0"
              :max="10000"
            ></el-input-number>
          </div>
          <el-form-item label="备注：">
            <textarea
              v-model="ruleForm.correctCause"
              style="width:360px; margin-left:-98px;font-family: '微软雅黑';font-weight: 400;font-style: normal;font-size: 14px;color: #606266;text-align: left;box-sizing:border-box;resize: none;border-radius:3px;padding:9px 6px;border:1px solid #e4e4e4;outline:none;"
              placeholder="请输入内容..."
            ></textarea>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button @click="subChange">提交</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 审批意见 -->
    <!-- <div class="component-model">
      <el-dialog title="审核意见" :visible.sync="ideaModel.show" width="600px">
        <div class="hadRadio">
          <el-form
            ref="form"
            :model="ideaModel"
            label-width="100px"
            style="width:300px;margin:0 auto;"
          >
            <el-form-item label="审核意见：">
              <el-radio-group v-model="ideaModel.idea" style="margin-left:-30px;">
                <el-radio label="true">同意</el-radio>
                <el-radio label="false">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注：" style="width:300px;">
              <el-input type="textarea" v-model="ideaModel.remark" style="margin-left:20px;"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="ideaModel.show = false">取消</el-button>
          <el-button @click="ideaCommit">确定</el-button>
        </span>
      </el-dialog>
    </div>-->
  </div>
</template>
<script>
import readOnlyAmap from '@/components/common/amap/readOnlyAmap'
export default {
  name: 'teamWork',
  components: {
    readOnlyAmap
  },
  data() {
    return {
      type: true,
      activeName: 'second',
      // 隐藏工作量bool值
      checked: false,
      //主 表格数据
      infodetail: [],
      // 隐藏工作量表格数据
      visibleWorkLoad: [],
      // 弹窗bool值
      dialogVisible: false,
      // 弹窗表单
      ruleForm: {
        itemContent: '',
        finalbudget: '',
        budget: '',
        correctCause: ''
      },
      ms_RoleName: localStorage.getItem('roleName'),
      readOnlyAmapData: {}, // 地图数据
      amapLoading: true // 控制地图loading
    }
  },
  created() {
    this.dataInit()
  },
  mounted() {
    this.getReadOnlyAmapData()
  },
  methods: {
    // 点击tab切换
    handleClick(tab, event) {
      this.dataInit()
    },
    // 查询列表
    dataInit() {
      let tabs
      switch (this.activeName) {
        case 'first':
          tabs = '1'
          break
        case 'second':
          tabs = '2'
          break
        case 'third':
          tabs = '3'
          break
        case 'fourth':
          tabs = '4'
          break
        default:
          tabs = '1'
          break
      }
      let that = this,
        suCb = res => {
          console.log('查询结果', res)
          that.infodetail = that.deepClone(res.data.res) || []
          that.visibleWorkLoad = that.deepClone(res.data.testWorks) || []
        },
        erCb = res => {},
        req = {
          url: '/api/web/proProject/auditWorkLoad',
          methods: 'post',
          data: { proId: that.$route.params.proId, workType: tabs },
          success: suCb,
          error: erCb
        }
      console.log('查询参数', req.data)
      that.$https(req)
    },
    // 修改数量
    edit(row) {
      this.dialogVisible = true
      this.ruleForm.itemContent = row.itemContent
      this.ruleForm.finalbudget = row.finalbudget
      this.ruleForm.correctCause = row.correctCause
      this.ruleForm.detailId = row.detailId
      this.ruleForm.budget = row.budget
      console.log(this.ruleForm)
    },
    // 修改数量提交
    subChange() {
      let that = this,
        suCb = res => {
          console.log('提交结果结果', res)
          if (res.data.flag == 1) {
            that.$message({
              message: '修改数量成功',
              type: 'success'
            })
            that.dialogVisible = false
            that.dataInit()
          }
        },
        erCb = res => {},
        params = {
          url: ''
        },
        req = {
          url: '/api/web/proMapWorkDetail/updateWorkLoadDetail',
          methods: 'post',
          data: {
            detailId: that.ruleForm.detailId,
            correctWorkload: that.ruleForm.finalbudget + '',
            correctCause: that.ruleForm.correctCause
          },
          success: suCb,
          error: erCb
        }
      console.log('提交参数', req.data)
      that.$https(req)
    },

    handleChange(value) {
      console.log(value)
    },
    // 提交上级审核
    handleSubInfo() {
      let that = this,
        suCb = res => {
          console.log('提交结果结果', res.data.data)
          if (res.data.flag == 1) {
            that.$message({
              message: '提交成功',
              type: 'success'
            })
            that.$router.go(-1)
          }
        },
        erCb = res => {
          console.log(res)

          that.dataInit()
        },
        req = {
          url: '/api/web/proProject/AuditWorkLoadDetail',
          methods: 'post',
          data: {
            proId: that.$route.params.proId,
            flowStep: ''
          },
          success: suCb,
          error: erCb
        }
      req.data.flowStep = that.ms_RoleName == 'ProjectClerk' ? '111' : '121'
      console.log('提交参数', req.data)
      that.$https(req)
    },
    /**
     * 获取施工队上传数据后绘图的方法
     */
    getReadOnlyAmapData() {
      let succ = res => {
        res = res.data
        if (res.flag == 1) {
          res = res.res
          // console.log(res);
          let points = res.mapPointList
          let pro_id = res.proId
          let pro_lnglat = [res.lng, res.lat]
          this.readOnlyAmapData.pro_id = pro_id
          this.readOnlyAmapData.pro_lnglat = pro_lnglat
          this.readOnlyAmapData.points = points
          // TODO: points 如果后端传来的属性不一样需要修改
          this.amapLoading = false
        }
      }
      let params = {
        proId: this.$route.params.proId
      }
      let data = {
        url: '/api/web/proProject/queryFinalWorkLoad',
        methods: 'post',
        data: params,
        success: succ
      }

      if (params.proId) {
        this.$https(data)
      }

      // mock的模拟数据
      // this.$axios.get('/mock/queryFinalWorkLoad.json').then(res => {
      //   succ(res)
      // })
    }

    // 审批意见
    // handleIdea(id) {
    //   this.ideaModel.show = true;
    //   this.ideaModel.proId = id;
    // },
    // 审批意见提交
    // ideaCommit() {
    //   let role = localStorage.getItem("roleName"),
    //     num;
    //   // 根据缓存里面的权限和弹窗的单选框值 来判断传递给后台的状态码
    //   if (role == "ProjectClerk" && this.ideaModel.idea == "false") {
    //     num = "111";
    //   } else if (role == "ProjectManager" && this.ideaModel.idea == "true") {
    //     num = "121";
    //   } else if (role == "ProjectManager" && this.ideaModel.idea == "false") {
    //     num = "129";
    //   } else if (role == "CenterClerk" && this.ideaModel.idea == "true") {
    //     num = "311";
    //   } else if (role == "CenterClerk" && this.ideaModel.idea == "false") {
    //     num = "319";
    //   } else if (role == "CenterDeputy" && this.ideaModel.idea == "true") {
    //     num = "321";
    //   } else if (role == "CenterDeputy" && this.ideaModel.idea == "false") {
    //     num = "329";
    //   } else if (role == "CenterBOSS" && this.ideaModel.idea == "true") {
    //     num = "531";
    //   } else if (role == "CenterBOSS" && this.ideaModel.idea == "false") {
    //     num = "539";
    //   } else {
    //     num = "0";
    //   }
    //   let that = this,
    //     suCb = res => {
    //       console.log("审批意见结果", res);
    //       if (res.data.flag == 1) {
    //         that.$msg("提交成功！");
    //         that.dataInit();
    //       }
    //     },
    //     erCb = res => {
    //       that.$msg("提交失败，权限受限！");
    //     },
    //     req = {
    //       url: "/api/web/",
    //       methods: "post",
    //       data: {
    //         proId: that.ideaModel.proId,
    //         number: num,
    //         errorDesc: that.ideaModel.remark,
    //         updateUser: localStorage.getItem("ms_userId")
    //       },
    //       success: suCb,
    //       error: erCb
    //     };
    //   console.log(req.data);
    //   if (req.data.errorDesc == "" && that.ideaModel.idea == "false") {
    //     that.$msg("提交失败，驳回必须填写备注！");
    //   } else if (req.data.number == 0) {
    //     that.$msg("提交失败，您的角色没有权利提交！");
    //   } else {
    //     that.$https(req);
    //   }
    // }
  }
}
</script>
<style scoped>
.bounce-enter {
  margin-top: -100px;
}
.bounce-enter-active {
  transition: all 1s ease;
}

.bounce-enter-to {
  margin-top: 0px;
}

.bounce-leave-active {
  transition: all 0.3s ease;
}

.main {
  width: 1100px;
  margin: 20px auto;
  text-align: left;
}
.gcl {
  margin-bottom: 20px;
}
.gcl .title {
  background: #f8f8f8;
  height: 35px;
  line-height: 35px;
  color: #666;
  padding: 0 20px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
  text-align: left;
}
a {
  color: #1abc9c;
  cursor: pointer;
  text-decoration: none;
}
.xiu {
  text-align: left;
  margin-bottom: 20px;
}
.xiu span {
  display: inline-block;
  text-align: right;
  width: 85px;
  margin-right: 15px;
}

.gcl span {
  float: right;
  font-size: 12px;
  border: 1px solid rgba(204, 204, 204, 1);
  margin-top: 4px;
  width: 120px;

  line-height: 26px;
  text-align: center;
}
.gcl span:hover {
  cursor: pointer;
  opacity: 0.7;
}

/* 工程量管理 底部 价格显示 */
.gcl_footer {
  text-align: right;
}

.gcl_footer .gcl_footer_top {
  margin-bottom: 10px;
  font-size: 18px;
}

.gcl_footer .gcl_footer_top span:nth-child(2n),
.gcl_footer .gcl_footer_bottom span:nth-child(2n) {
  color: #1abc9c;
}

.gcl_footer .gcl_footer_bottom {
  margin-bottom: 10px;
  font-size: 19px;
}

.sumbitBtn {
  width: 120px;
  height: 35px;
  line-height: 35px;
  color: #1abc9c;
  background-color: #fff;
  border: 1px solid #1abc9c;
  border-radius: 5px;
}

.sumbitBtn:hover {
  color: #fff;
  background-color: #1abc9c;
}

/* read-only-amap Start*/
.read-only-amap {
  widows: 100%;
}
/* read-only-amap End and 地图容器 Start */
.amap {
  width: 100%;
  height: 500px;
  position: relative;
}
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>


<!-- 在全局中修改地图的css -->
<style>
.read-only-amap .marker-container {
  position: relative;
}
.read-only-amap .marker-container img {
  position: absolute;
}
.read-only-amap .marker-container div:nth-child(2) {
  color: red;
  position: absolute;
  top: -20px;
  left: 0;
}
.read-only-amap .marker-container div:nth-child(3) {
  height: 20px;
  line-height: 20px;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid red;
  position: absolute;
  left: 6px;
  top: 6px;
}
</style>
